<!DOCTYPE html>
<html lang="zh-cn">
<head>
<title>供应商注册 - Mubea</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<link rel="shortcut Icon" href="/favicon.ico" type="image/x-icon" />
<link href="../source/css/base.css" rel="stylesheet" type="text/css" />
<link href="../source/css/main.css" rel="stylesheet" type="text/css" />
<link href="../source/css/element-ui@2.4.0.index.css" rel="stylesheet" type="text/css" />

</head>
    <div id="app" class="supplier_reg">
        <div class="header">
            <div class="base-width">
                <img class="logo" src="../source/img/logo.png" alt="" />
            </div>
        </div>


        <div class="base-width">
            <el-form :model="regForm" :rules="rules" ref="ruleForm" label-width="120px" class="supplier-reg-form">

                <el-form-item label="公司名称" prop="company">
                    <el-input v-model="regForm.company" placeholder="公司名称"></el-input>
                </el-form-item>

                <el-form-item label="公司地址" prop="address">
                    <el-input v-model="regForm.address" placeholder="公司地址"></el-input>
                </el-form-item>

                <el-form-item label="公司电话" prop="phone">
                    <el-input v-model="regForm.phone" placeholder="公司电话"></el-input>
                </el-form-item>

                <el-form-item label="营业执照上传" prop="file">
                    <!--<el-upload
                            class="upload-demo"
                            action="https://jsonplaceholder.typicode.com/posts/"
                            :before-upload="beforeUpload">
                        <el-button size="small" type="primary">点击上传</el-button>
                        <div slot="tip" class="el-upload__tip">
                            只能上传jpg/png文件，且不超过500kb
                        </div>
                    </el-upload>-->


                    <div class="file-pic" v-show="isShowPic">
                        <img :src="regForm.file" alt="" />
                        <!--<img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1561875544,2059314968&fm=58&bpow=1024&bpoh=768" alt="" />-->

                        <span class="delete">
                            <i class="el-icon-delete" title="删除" @click="deletePic()"></i>
                        </span>
                    </div>

                    <a href="javascript:;" id="filePicker" class="file-picker" v-show="!isShowPic" >

                        <i class="el-icon-plus"></i>
                    </a>

                    <!--<input type="file" @change="getBase64()" v-model="regForm.file" id="image-file-btn" class="image-file-btn" >-->

                </el-form-item>

                <el-form-item label="联系人姓名" prop="contractName">
                    <el-input v-model="regForm.contractName" placeholder="联系人姓名"></el-input>
                </el-form-item>

                <el-form-item label="联系人电话" prop="contractPhone">
                    <el-input v-model="regForm.contractPhone" placeholder="联系人电话"></el-input>
                </el-form-item>
                <el-form-item label="联系人邮箱" prop="contractEmail">
                    <el-input v-model="regForm.contractEmail" placeholder="联系人邮箱"></el-input>
                </el-form-item>

                <el-form-item label="用户名" prop="username">
                    <el-input v-model="regForm.username" placeholder="用户名"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pwd">
                    <el-input type="password" v-model="regForm.pwd" placeholder="密码"></el-input>
                </el-form-item>

                <el-form-item class="reg-btn-box">
                    <el-button type="primary" class="reg-btn" @click="submitForm('ruleForm')">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>

<script src="../source/js/lib/vue.min.js"></script>
<script src="../source/js/lib/jquery.min.js"></script>
<script src="../source/js/lib/element-ui@2.4.0.index.js"></script>
<script src="../source/js/common.js"></script>
<script src="../source/js/lib/webuploader/webuploader.min.js"></script>
<script>
    var app = new Vue({
        el:'#app',
        data : {
            uploader:null,
            regForm: {
                company:'',
                address:'',
                phone:'',
                file:'',
                contractName:'',
                contractPhone:'',
                contractEmail:'',
                username:'',
                pwd: '',
                account: user.account
            },
            imgFile:'',
            isShowPic:false,
            rules: {
                company: [
                    { required: true, message: '请输入公司名称', trigger: 'blur' },
                ],
                address: [
                    { required: true, message: '请输入公司地址', trigger: 'blur' },
                ],
                phone: [
                    { required: true, message: '请输入公司电话', trigger: 'blur' },
                ],
                file: [
                    { required: true, message: '请上传营业执照', trigger: 'blur' },
                ],
                contractName: [
                    { required: true, message: '请输入联系人姓名', trigger: 'blur' },
                ],
                contractPhone: [
                    { required: true, message: '请输入联系人电话', trigger: 'blur' },
                ],
                contractEmail: [
                    { required: true,validator:function(rule, value, callback){
                        if(value.trim() === ""){
                            callback(new Error('请输入联系人邮箱'));
                        }else if (!ARegexp.email.test(value)){
                            callback(new Error('邮箱格式错误'));
                        } else {
                            callback();
                        }
                    }},
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' }
                ]
            }
        },
        mounted:function(){

            // this.getBase64();
            this.initUploader();
        },
        methods: {
            apiReg:function(){
                var _this = this;

                // var inJson = $.extend({},_this.regForm);
                // inJson.file = this.imgFile;

                $.ajax({
                    url:apiUrl+'/AddUser',
                    type:'POST',
                    data:{'json':JSON.stringify(_this.regForm)},
                    //dataType :'jsonp',
                    success:function(datas){
                        if(datas.Success===true){
                            // setCookie('username',encodeURIComponent(_this.loginForm.username),720);
                            // setCookie('EmpCode',datas.EmpCode,720);
                            _this.$message.success('恭喜，注册成功');
                            setTimeout(function(){
                                location.href='./login.html';
                            },2500);
                        }else{
                            if(datas.msg){
                                _this.$message.error(datas.msg);
                            }else{
                                _this.$message.error('注册失败，请重试');
                            }
                        }
                    },
                    error:function(datas){
                        console.log(datas)
                    }
                });
            },
            deletePic:function(){
                this.regForm.file = '';
                this.imgFile = '';
                this.isShowPic = false;

                // this.uploader.reset();
                this.initUploader();
            },
           /* choosePic:function(){
                $('#image-file-btn').click();

                // var _this = this;
                // // $('#image-file-btn').on('click',function () {
                //     // console.log(this)
                //     // var reader = new FileReader();
                //     // reader.onload = function (e) {
                //     //     _this.imgFile = reader.result;
                //     //     _this.isShowPic = true;
                //     // }
                //     // reader.readAsDataURL(this.files[0]);
                //
                //     var obj = document.getElementById('image-file-btn');
                //     if(document.all){
                //         //兼容IE
                //         console.log('1',obj.value);
                //         _this.ieBase64(obj.value);
                //     }else{
                //         //兼容主流浏览器
                //         console.log('2',obj.files[0]);
                //         _this.mainBase64(obj.files[0]);
                //     }
                // // })
            },
            getBase64:function(){
                var _this = this;
                var obj = document.getElementById('image-file-btn');

                _this.regForm.file = obj.value;
                if (typeof FileReader == "undefined") {
                    _this.$message.error("抱歉，你的浏览器不支持 FileReader，不能将图片转换为Base64，请使用现代浏览器操作！");
                } else {
                    try {
                        if(!/(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i.test(obj.value)) {
                            _this.$message.error("请上传jpg/jpeg/png/gif/bmp格式的照片！");
                            return false;
                        }

                        var reader = new FileReader();
                        reader.onload = function (e) {
                            _this.imgFile = reader.result;
                            _this.isShowPic = true;
                            _this.regForm.file = obj.value;
                        }
                        reader.readAsDataURL(obj.files[0]);
                    } catch (e) {
                        _this.$message.error('图片转Base64出错啦！' + e.toString())
                    }
                }

                // console.log('value',obj.value)
                // var img = document.createElement('img');
                // img.src = obj.value;  //此处自己替换本地图片的地址
                // var canvas = document.createElement("canvas");
                // canvas.width = img.width;
                // canvas.height = img.height;
                // var ctx = canvas.getContext("2d");
                // ctx.drawImage(img, 0, 0, img.width, img.height);
                // var dataURL = canvas.toDataURL("image/png");
                //
                //
                // _this.imgFile = dataURL;
                // _this.isShowPic = true;
                // _this.regForm.file = obj.value;
                //
                // return dataURL;


            },*/
            initUploader:function(){
                var _this = this;

                this.uploader = WebUploader.create({
                    // 选完文件后，是否自动上传。
                    server: apiUrl2+'/UploadOrder',
                    method:'POST',
                    auto: false,
                    swf:'../source/js/lib/webuploader/Uploader.swf',
                    pick: {
                        id:'#filePicker',
                        multiple:false
                    },
                    // prepareNextFile:true,
                    formData:{'json':JSON.stringify(_this.uploadData)},
                    // fileNumLimit:1,
                    threads:1,
                    accept: {
                        title: 'Images',
                        extensions: 'gif,jpg,jpeg,bmp,png',
                        mimeTypes: 'image/*'
                    }
                });

                this.uploader.on( 'fileQueued', function( file ) {

                    console.log('file',file)
                    if(!/(\.gif|\.jpeg|\.png|\.jpg|\.bmp)/i.test(file.name)){
                        _this.$message.error('请上传jpg/jpeg/png/gif/bmp格式的照片！');
                        return false;
                    }

                    if(file.size / 1024 / 1024 > 5){
                        _this.$message.error('上传文件大小不能超过 5MB!');
                        return false;
                    }


                    _this.uploader.makeThumb( file, function( error, ret ) {
                        _this.regForm.file = ret;
                        _this.isShowPic = true;
                        // _this.regForm.file = obj.value;

                        /*_this.$nextTick(function(){
                            uploader.reset();
                        })*/
                    },1,1);


                });

            },
            submitForm:function(formName) {
                var _this = this;

                this.$refs[formName].validate(function(valid) {
                    if (valid) {
                        // _this.regForm.file = this.imgFile;
                        _this.apiReg();
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
        }
    })
</script>
</body>
</html>